<template xmlns="http://www.w3.org/1999/html">
  <el-collapse-item :name="item.id">
    <!-- 标题栏-->
    <template #title>
      <strong style="margin-right: 26px">{{ item.name }}</strong>
      <el-rate :value="item.max"></el-rate>
    </template>

    <template #default>
      <a><i class="fa fa-plus-circle"></i>增加一行</a>
      <div class="pull-right">
        <label>
          <strong>积分设置</strong>
          <el-input v-model="max"  style="width: 128px" type="number"></el-input>
        </label>
        <label>
          <strong>换算比例</strong>
          <el-input v-model="max"  style="width: 128px" type="number"></el-input>
        </label>
      </div>
      <el-table :data="data">
        <sea-col-input property="model" label="对象" :change="onAction"></sea-col-input>
        <sea-col-input property="field" label="字段" :change="onAction"></sea-col-input>
        <sea-col-input property="label" label="字段名" :change="onAction"></sea-col-input>
        <sea-col-input property="caseType" label="数据类型" :change="onAction"></sea-col-input>
        <sea-col-input property="rule" label="计算规则" :change="onAction"></sea-col-input>
        <sea-col-input property="value" label="缺省值" :change="onAction"></sea-col-input>

        <!--操作栏-->
        <sea-table-actionbar width="180" :on-action="onAction" :buttons="buttons"></sea-table-actionbar>
      </el-table>
    </template>
  </el-collapse-item>
</template>

<script setup>
/* eslint-disable */


import {reactive, ref} from "vue";

/**
 * 总控面板
 */
const props = defineProps({
    // 成功回调，通常是刷新数据表格
    item: {type: Object}
})

// 最大值
const max = ref(0);

// 操作栏
const buttons = ref([
    {type: 'btn', evt: 'remove', label: '删除'}
]);

// 数据列表
const data = reactive([
    {model: 'user', field: 'v1', label: '值a', caseType: 'Integer', rule: '$v1 x 10 + 2', value: '10'}
    , {model: 'user', field: 'v2', label: '值b', caseType: 'Integer', rule: '$v1 x 10 + $v2', value: '9'}
])


const onAction = ()=>{

}

</script>
